<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Debug Tools</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<!-- 	<script type="text/javascript" src="/data/js/json/json2.js"></script> -->
</head>
<body>

<div class="container">
	URL:<input type="text" name="txtForm" id="txtForm">
	<table class="table table-bordered table-condensed">	
	
		<tr>
			<th>input name</th>
			<th>input value</th>
			<th><input type="button" id="addInput" value="Add Input"></th>
		</tr>
		<tbody id="formInput">
		<tr>
			<td><input type="text" name="inputKey[]" id=""></td>
			<td><input type="text" name="inputVal[]" id=""></td>
			<td><input type="button" id="del" value="remove" onclick="javasrcript:$(this).parent().parent().remove();"></td>
		</tr>
		</tbody>
		<tr>
			<td><input type="button" name="btnGet" id="btnGet" value="Get"></td>
			<td><input type="button" name="btnPost" id="btnPost" value="Post"></td>
			<td><input type="button" name="" id="" value="No"></td>
		</tr>
	</table>
	
	<div id="reContent">
		<textarea rows="18" id="content" name="content" cols="90"></textarea>
	</div>
	<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
	// var interval;
	// function getServerTime()
	// {
		
	// }
	// var timeNum=0;
	$(function(){
		// interval = setInterval(getServerTime, 1000); 
		$("#addInput").click(function(){
			$("#formInput").append('<tr><td><input type="text" name="inputKey[]" id=""></td><td><input type="text" name="inputVal[]" id=""></td><td><input type="button" id="del" value="remove" onclick="javasrcript:$(this).parent().parent().remove();"></td></tr>');
		});
		$("#btnGet").click(function(){
			var url = $("#txtForm").val();
			var data = new Object();
			var inputKey = $("input[name='inputKey[]'");
			var inputVal = $("input[name='inputVal[]'");
			console.info(inputKey.length);
			for(var i=0;i<inputKey.length;i++)
			{
				//console.info(inputKey[i].value+":"+inputVal[i].value);
				data[inputKey[i].value] = inputVal[i].value;
				//data.push(inputKey[i] => inputVal[i]);
			}
			console.info(data);			
			if(url==null||url=='')
			{
				return false;
			}
			
			$.get(url,eval(data),function(res){
				console.info(res);
				// var content = '{';
				// for(key in res)
				// {
					// content += '"'+key+'":"'+res[key]+'",';
				// }
				// content = content.substring(0,content.length-1);
				// content+='}';
				$("#content").val(JSON.stringify(res));
			},'json');
		});
		$("#btnPost").click(function(){
			var url = $("#txtForm").val();
			var data = new Object();
			var inputKey = $("input[name='inputKey[]'");
			var inputVal = $("input[name='inputVal[]'");
			for(var i=0;i<inputKey.length;i++)
			{
				//console.info(inputKey[i].value+":"+inputVal[i].value);
				data[inputKey[i].value] = inputVal[i].value;
				//data.push(inputKey[i] => inputVal[i]);
			}
			if(url==null||url=='')
			{
				return false;
			}
			data['url'] = url;
			console.info(data);	
			console.log(eval(data));		
			$.post('/cu/do_t',eval(data),function(res){
				console.info(res);
// 				var content = '{';
// 				for(key in res)
// 				{
// 					content += '"'+key+'":"'+res[key]+'",';
// 				}
// 				content = content.substring(0,content.length-1);
// 				content+='}';
// 				$("#content").val(JSON.stringify(res));
			},'json');
		});
	});
</script>
</body>
</html>